/* 滑动动画 */
@keyframes slideOutLeft {
  to {
    transform: translateX(-100%);
  }
}

.animate-slide-out {
  animation: slideOutLeft 0.3s ease forwards;
}

/* 任务完成动画 */
@keyframes completeTask {
  0% {
    background-color: #F9FAFB;
    transform: scale(1);
  }
  50% {
    background-color: #D1FAE5;
    transform: scale(1.02);
  }
  100% {
    background-color: #F9FAFB;
    transform: scale(1);
  }
}

.animate-complete {
  animation: completeTask 0.5s ease forwards;
}

/* 弹跳进入动画 */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-bounce-in {
  animation: bounceIn 0.3s ease forwards;
}

/* 淡入淡出动画 */
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 任务完成线效果 */
.task-completed .task-title {
  position: relative;
  color: #9CA3AF;
}

task-completed .task-title::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #9CA3AF;
  transform: scaleX(0);
  transform-origin: right;
  animation: strikeLine 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes strikeLine {
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* 按钮滑动悬停效果 */
.btn-slide-hover {
  background: linear-gradient(90deg, #3B82F6, #1D4ED8);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position 0.3s ease, transform 0.2s ease;
}

.btn-slide-hover:hover {
  background-position: 0 0;
  transform: translateY(-2px);
}

/* 暗黑模式切换动画 */
.dark-mode-transition {
  transition: background-color 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 粒子动画 */
@keyframes float {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(var(--tx), var(--ty));
  }
}

.animate-float {
  animation: float var(--duration, 8s) infinite ease-in-out;
}

/* 缓动函数 */
/* 进入动画 */
.ease-enter {
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 退出动画 */
.ease-exit {
  animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}